<template>
  <div class="page-modal">
    <el-dialog
      v-model="centerDialogVisible"
      :title="dialogTitleName"
      width="30%"
      destroy-on-close
      center
    >
      <red-form v-bind="pageModalFormConfig" v-model="formData"></red-form>
      <!-- 默认插槽 -->
      <slot></slot>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleDialogConfirmClick">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
import { useStore } from '@/store';

import redForm from '@/base-ui/form';
import emitter from '@/utils/eventBus';
import { PAGECONTENTRELOAD } from '@/utils/eventBus/constant';
import { useMessageSuccess } from '@/hooks/use-message';

export default defineComponent({
  props: {
    pageModalFormConfig: {
      type: Object,
      require: true
    },
    // 这个值将来要作为red-form的input的值
    defaultInfo: {
      type: Object,
      default: () => ({})
    },
    otherInfo: {
      type: Object,
      default: () => ({})
    },
    pageName: {
      type: String,
      require: true
    }
  },
  components: {
    redForm
  },
  setup(props) {
    const store = useStore();
    const centerDialogVisible = ref(false);
    // 外界可以ref我再修改我的值 这里hooks:use-page-modal会修改的我的值
    const dialogTitleName = ref('默认标题');
    // 只要把这个值用v-model绑定给red-form, red-form的input就会显示内容.供我整个user页面的dialog使用.
    // 无论是新建点开的dialog还是编辑点开的dialog都是同一个.
    // 区别是新建点开时会将传过来的defaultInfo=一个空对象. 编辑点开会将原来这条数据的信息携带进来进行回显.
    // 用ref包裹这个数据的目的是: 将其用v-model绑定给red-form后, red-form再次发出事件出来后我的这个数值也会跟着一起变化.
    const formData = ref<any>({});
    // 监听传进来的defaultInfo变化, 再去ElFormItems里取出每个input的field属性, 作为v-model传递的对象.
    watch(
      () => props.defaultInfo, // 监听初始值
      (newValue) => {
        for (const item of props.pageModalFormConfig?.ElFormItems) {
          formData.value[`${item.field}`] = newValue[`${item.field}`];
        }
      }
    );

    // 点击dialog确定后的逻辑. 创建,编辑.
    const handleDialogConfirmClick = () => {
      centerDialogVisible.value = false; // 关闭dialog
      // 区别是点击新建后关闭还是点击编辑用户后关闭
      if (dialogTitleName.value.includes('新建')) {
        // 新建数据时
        store.dispatch('commonModule/createPageListAction', {
          url: '/' + props.pageName,
          formInfo: { ...formData.value, ...props.otherInfo }
        });
        emitter.emit(PAGECONTENTRELOAD); // 刷新pageContent的table
        useMessageSuccess({ message: dialogTitleName.value + '成功' }); // 显示提示信息
      } else if (dialogTitleName.value.includes('编辑')) {
        // 编辑数据时
        store.dispatch('commonModule/editPageListAction', {
          url: `/${props.pageName}/${props.defaultInfo.id}`, // props.defaultInfo里面有id
          formInfo: { ...formData.value, ...props.otherInfo }
        });
        emitter.emit(PAGECONTENTRELOAD); // 刷新pageContent的table
        useMessageSuccess({ message: dialogTitleName.value + '成功' }); // 显示提示信息
      }
    };

    return {
      centerDialogVisible, // 控制dialog弹窗的开启与关闭
      formData, // 用v-model绑定给red-form即可在input回显内容
      handleDialogConfirmClick,
      dialogTitleName
    };
  }
});
/* 制作是否单独隐藏password的操作.点击添加时显示password,点击编辑时不显示.
给配置文件modalConfig的formItems的password字段加上一个属性isHidden
点击编辑时将这个其属性设置为true, 在自己的页面(user)页面操作, 分别给这两个按钮传递一个回调函数.
点击添加时将其设置为false
*/
</script>

<style scoped lang="less"></style>
